<template>
  <div class="my-collection-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="margin-right: 30px">我的收藏</span>
        <el-button type="primary" icon="el-icon-plus" size="small" @click="showAddFolderDialog">新建收藏夹</el-button>
      </div>

      <!-- 筛选器 -->
      <div class="filter-container">
        <el-form :inline="true" size="small">
          <el-form-item label="收藏夹">
            <el-select v-model="filters.folder" placeholder="请选择收藏夹" @change="filterCollections">
              <el-option v-for="item in folders" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-select v-model="filters.tag" placeholder="请选择标签" @change="filterCollections">
              <el-option v-for="item in tags" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
                v-model="filters.keyword"
                placeholder="请输入关键词搜索"
                prefix-icon="el-icon-search"
                @keyup.enter="filterCollections"
            />
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格展示 -->
      <el-table
          :data="paginatedData"
          border
          highlight-current-row
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="题目" prop="question" />
        <el-table-column label="收藏夹" prop="folder" />
        <el-table-column label="标签" prop="tags" />
        <el-table-column label="收藏日期" prop="date" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="text" size="small" @click="viewCollection(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="cancelCollection(scope.row)">取消收藏</el-button>
            <el-button type="text" size="small" @click="moveCollection(scope.row)">移至其他收藏夹</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          class="pagination"
          background
          layout="prev, pager, next, sizes, jumper"
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :total="filteredCollections.length"
          @current-change="handlePageChange"
      />

      <!-- 批量取消收藏按钮 -->
      <el-button
          type="danger"
          icon="el-icon-delete"
          @click="batchCancelCollection"
          :disabled="selectedCollections.length === 0"
      >
        批量取消收藏
      </el-button>
    </el-card>

    <!-- 添加新收藏夹的对话框 -->
    <el-dialog
        title="创建新收藏夹"
        :visible.sync="addFolderDialogVisible"
        @close="resetFolderName"
    >
      <el-input v-model="newFolderName" placeholder="请输入收藏夹名称" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFolderDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFolder">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 移动题目到其他收藏夹的对话框 -->
    <el-dialog
        title="选择目标收藏夹"
        :visible.sync="moveCollectionDialogVisible"
        @close="resetMoveCollection"
    >
      <el-select v-model="selectedFolderForMove" placeholder="选择目标收藏夹">
        <el-option v-for="item in folders" :key="item" :label="item" :value="item" />
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button @click="moveCollectionDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="moveCollectionToFolder">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "MyCollection",
  data() {
    return {
      collections: [
        {
          id: 1,
          question: "这是一道单选题，答案是B。",
          folder: "收藏夹1",
          tags: ["基础", "单选"],
          date: "2024-11-16",
        },
        {
          id: 2,
          question: "这是一道多选题，答案是A、C。",
          folder: "收藏夹2",
          tags: ["高级", "多选"],
          date: "2024-11-15",
        },
        {
          id: 3,
          question: "这是一道判断题，答案是对。",
          folder: "收藏夹1",
          tags: ["基础", "判断"],
          date: "2024-11-14",
        },
        // 模拟数据
      ],
      folders: ["收藏夹1", "收藏夹2", "收藏夹3"], // 模拟收藏夹列表
      tags: ["基础", "高级", "单选", "多选", "判断"],
      filters: {
        folder: "",
        tag: "",
        keyword: "",
      },
      filteredCollections: [],
      selectedCollections: [],
      currentPage: 1,
      pageSize: 5,
      newFolderName: "", // 新建收藏夹的名称
      addFolderDialogVisible: false, // 新建收藏夹对话框显示/隐藏
      moveCollectionDialogVisible: false, // 移动题目对话框显示/隐藏
      selectedFolderForMove: "", // 移动到的目标收藏夹
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredCollections.slice(start, end);
    },
  },
  methods: {
    filterCollections() {
      this.filteredCollections = this.collections.filter((c) => {
        const folderMatch = this.filters.folder ? c.folder === this.filters.folder : true;
        const tagMatch = this.filters.tag ? c.tags.includes(this.filters.tag) : true;
        const keywordMatch = this.filters.keyword ? c.question.includes(this.filters.keyword) : true;
        return folderMatch && tagMatch && keywordMatch;
      });
    },
    handleSelectionChange(selection) {
      this.selectedCollections = selection;
    },
    viewCollection(collection) {
      this.$message.info(`查看收藏：${collection.question}`);
    },
    cancelCollection(collection) {
      this.collections = this.collections.filter((c) => c.id !== collection.id);
      this.filterCollections();
      this.$message({
        message:'已取消收藏',
        type: 'success',
        offset: '80'
      });
    },
    batchCancelCollection() {
      this.selectedCollections.forEach((collection) => {
        this.collections = this.collections.filter((c) => c.id !== collection.id);
      });
      this.filterCollections();
      this.$message({
        message:'已批量取消收藏',
        type: 'success',
        offset: '80'
      });
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
    // 新建收藏夹
    showAddFolderDialog() {
      this.addFolderDialogVisible = true;
    },
    addFolder() {
      if (!this.newFolderName) {
        this.$message({
          message:'收藏夹名称不能为空',
          type: 'error',
          offset: '80'
        });
        return;
      }
      if (this.folders.includes(this.newFolderName)) {
        this.$message({
          message:'收藏夹名称已存在',
          type: 'error',
          offset: '80'
        });
        return;
      }
      this.folders.push(this.newFolderName);
      this.addFolderDialogVisible = false;
      this.$message({
        message:'新建收藏夹成功',
        type: 'success',
        offset: '80'
      });
    },
    // 移动题目到其他收藏夹
    moveCollection(collection) {
      this.selectedFolderForMove = collection.folder;
      this.moveCollectionDialogVisible = true;
      this.collectionToMove = collection;
    },
    moveCollectionToFolder() {
      if (!this.selectedFolderForMove) {
        this.$message({
          message:'请选择目标收藏夹',
          type: 'warning',
          offset: '80'
        });
        return;
      }
      this.collectionToMove.folder = this.selectedFolderForMove;
      this.moveCollectionDialogVisible = false;
      this.$message({
        message:'`已将题目移至"${this.selectedFolderForMove}"收藏夹！`',
        type: 'success',
        offset: '80'
      });
    },
    // 重置新建收藏夹对话框内容
    resetFolderName() {
      this.newFolderName = "";
    },
    // 重置移动收藏夹对话框
    resetMoveCollection() {
      this.selectedFolderForMove = "";
    },
  },
  created() {
    this.filterCollections();
  },
};
</script>

<style scoped>
.my-collection-container {
  padding: 20px;
}

.filter-container {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
}
</style>
